<template>
	<view class="shop-detail">
		<view class="title-page">
			<view :style="{ height: statusBarHeight }" class="uni-status-bar">
			</view>
			<view class="title-block">
				<image :src="leftIcon" @tap="leftClick" class="left-img"></image>
			</view>
		</view>
		<swiper-show :bannerList='bannerList' type='1'></swiper-show>
		<view class="content">
			<info :infoData='info' :type='0'></info>
			<detail-block :detailBlockData='detailBlockData'></detail-block>
		</view>
		<view class="fixed-block">
			<view class="txt" @tap="buyClick">立即购买</view>
		</view>
	</view>
</template>

<script>
	import swiperShow from '@/pages/shopDetail/components/swiperShow.vue'
	import detailBlock from '@/pages/shopDetail/components/detailBlock.vue'
	import info from '@/pages/shopDetail/components/info.vue'
	export default {
		components: {
			swiperShow,
			detailBlock,
			info
		},
		data() {
			return {
				leftIcon: require('@/static/detail/leftIcon.png'),
				kefu: require('@/static/detail/kefu.png'),
				statusBarHeight: 20,
				homeIcon: require('@/static/detail/homeIcon.png'),
				coupon: {},
				detailBlockData: {},
				info: {},
				bannerList: [],
			}
		},
		mounted() {
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px'
		},
		onLoad() {
			let obj = uni.getStorageSync('coupon')
			this.coupon = obj
			this.detailBlockData = {
				text: "",
				imgs: obj.detailsArr,
				
			}
			this.bannerList = [obj.detailsArr[0]]
			this.info = {
				title: "",
				price: obj.coupon_price,
				line_price: obj.sales_volume,
				stock: obj.stock,
				count:obj.count
			}
		},
		methods: {
			leftClick() {
				uni.navigateBack()
			},
			pageClick(url) {
				uni.switchTab({
					url
				})
			},
			buyClick() {
				
				var self = this;
				uni.showModal({
					title: '提示',
					content: '确认购买商品券？',
					success: function (res) {
						if (res.confirm) {
							self.$http('coupon.buyCoupon', {
								token: self.$tools.getToken(),
								count: 1,
								id: self.coupon.id
							}).then(res => {
								if (res.code == 200) {
									self.payFun(res.data.data.order_number)
								} else {
									self.$tools.showMsg(res.msg)
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});

			},
			payFun(orderNumber) {
				this.$http('coupon.payCoupon', {
					token: this.$tools.getToken(),
					order_number: orderNumber
				}).then(res => {
					if (res.code == 200) {
						var AtimeStamp = res.data.timeStamp;
						var AnonceStr = res.data.nonceStr;
						var Apackage = res.data.package;
						var ApaySign = res.data.paySign;
						wx.requestPayment({
							'timeStamp': AtimeStamp,
							'nonceStr': AnonceStr,
							'package': Apackage,
							'signType': 'MD5',
							'paySign': ApaySign,
							'success': function(res) {
								uni.showToast({
									title: '购买成功',
									icon: "none"
								})

							},
							'fail': function(res) {
								uni.showToast({
									title: '取消支付',
									icon: "none"
								})
							},
							'complete': function(res) {}
						})
					}
				})
			}
		}
	}

</script>
<style>
	page {
		background: #F7F7F7;

	}

</style>
<style lang="scss" scoped>
	.title-page {
		position: fixed;
		left: 0;
		right: 0;
		z-index: 999;

		.uni-status-bar {
			height: 20px;
		}

		.title-block {
			font-size: 32rpx;
			font-weight: 500;
			height: 80rpx;
			color: rgba(0, 0, 0, 1);
			display: flex;
			align-items: center;

			.left-img {
				margin-left: 24rpx;
				width: 50rpx;
				height: 50rpx;

			}
		}
	}


	.fixed-block {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		height: 90rpx;
		background: rgba(255, 255, 255, 1);
		display: flex;
		align-items: center;
		padding: 0 30rpx;
		justify-content: space-around;
		font-size: 28rpx;
		font-weight: 500;
		color: rgba(255, 255, 255, 1.0);
		background: linear-gradient(135.25deg, #ffcf01 0%, #ffbf00 100%);		
		.left-item-option {

			flex: auto;
			display: flex;
			align-items: center;

			.item {
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;


				.icon {
					width: 38rpx;
					height: 40rpx;

				}

				.name {
					margin-top: 8rpx;
					font-size: 20rpx;
					font-weight: 400;
					color: rgba(102, 102, 102, 1);
				}
			}
		}

		.right-item-option {

			display: flex;
			align-items: center;
			flex: none;
			justify-content: space-between;

			.txt {
				font-size: 24rpx;
				font-weight: 500;
				color: rgba(27, 25, 25, 1);
			}
		}

	}

	.content {
		padding-bottom: 120rpx;
	}

</style>

